<template>
  <div class="app">
    <van-nav-bar title="聚橙网" left-text="返回" left-arrow>
      <van-icon name="search" slot="right" />
    </van-nav-bar>
    <transition>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
    <van-tabbar v-model="active">
      <van-tabbar-item to="/home">
        <span>首页</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active1 : icon.inactive1" />
      </van-tabbar-item>
      <van-tabbar-item to="/juyuan">
        <span>剧院</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active2 : icon.inactive2" />
      </van-tabbar-item>
      <van-tabbar-item  to="/piaojia">
        <span>票夹</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active3 : icon.inactive3" />
      </van-tabbar-item>
      <van-tabbar-item to="/myself">
        <span>我的</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active4 : icon.inactive4" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data: () => ({
    active: 0,
    icon: {
      inactive1: 'https://wx1.sinaimg.cn/mw690/006uMq1igy1g8u20tnr20j301e01e742.jpg',
      active1: 'https://wx4.sinaimg.cn/mw690/006uMq1igy1g8u20tobx9j301e01ewea.jpg',
      inactive2: 'https://wx2.sinaimg.cn/mw690/006uMq1igy1g8u20tomlnj301e01eq2p.jpg',
      active2: 'https://wx2.sinaimg.cn/mw690/006uMq1igy1g8u20too7aj301e01edfm.jpg',
      inactive3: 'https://wx3.sinaimg.cn/mw690/006uMq1igy1g8u20toevaj301e01eq2p.jpg',
      active3: 'https://wx3.sinaimg.cn/mw690/006uMq1igy1g8u20tpc8fj301e01e742.jpg',
      inactive4: 'https://wx2.sinaimg.cn/mw690/006uMq1igy1g8u20tqdzfj301e01e0si.jpg',
      active4: 'https://wx1.sinaimg.cn/mw690/006uMq1igy1g8u20tr8qjj301e01ejr6.jpg'
    }
  }),
  created () {},
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.app {
  overflow-x: hidden;
}
//页面滑动切换
.v-enter {
  transform: translateX(100%);
}
.v-leave-to {
  transform: translateX(-100%);
  position: absolute;
  left: -300%;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>
